<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { useElementSize } from '@vueuse/core';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  }
});

const otherReasonCol = ref(0);
const formRef = ref(null);
const { height } = useElementSize(formRef);
const model = ref({
  moduleNo: null,
  fullProdNo: null,
  newCustProdNo: null,
  custProdNo: null,
  newSameModuleNo: null,
  surfTrea1: null,
  newSurfTrea1: null,
  custProdName: null,
  effectiveTiming: null,
  pnType: false,
  customerCheck: false,
  changeReason: [],
  otherReason: null,
  oldDataDeal: null,
  inventoryDealMethod: null,
  nowboardDealMethod: null
});
const formList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 12,
    readonly: true
  },
  {
    type: 'input',
    key: 'fullProdNo',
    label: '新生产型号',
    placeholder: '请输入生产型号',
    span: 12,
    disabled: true
  },
  {
    type: 'input',
    key: 'custProdNo',
    label: '客户型号',
    disabled: true,
    placeholder: '',
    span: 12
  },
  {
    type: 'input',
    key: 'newCustProdNo',
    label: '新客户型号',
    disabled: true,
    placeholder: '',
    span: 12
  },
  {
    type: 'input',
    key: 'sameModuleNo',
    label: '同等型号',
    disabled: true,
    placeholder: '',
    span: 12
  },
  {
    type: 'input',
    key: 'newSameModuleNo',
    label: '新同等型号',
    placeholder: '',
    span: 12
  },
  {
    type: 'input',
    key: 'surfTrea1',
    label: '旧型号特性',
    disabled: true,
    placeholder: '',
    span: 12
  },
  {
    type: 'dictionary',
    dictCode: 'model_characteristics',
    useGrid: true,
    selectType: 'select',
    key: 'newSurfTrea1',
    label: '新同等型号特性',
    placeholder: '请选择新同等型号特性',
    span: 12,
    showSearch: true
  },
  {
    type: 'input',
    key: 'custProdName',
    label: '客户名称',
    disabled: true,
    placeholder: '',
    span: 12
  },
  {
    type: 'select',
    key: 'effectiveTiming',
    label: '生效时间',
    placeholder: '请选择生效时间',
    selectOptions: [
      {
        label: '立即生效',
        value: '立即生效'
      },
      {
        label: '下批订单',
        value: '下批订单'
      },
      {
        label: '其他',
        value: '其他'
      }
    ],
    rule: {
      required: true,
      message: '请选择生效时间',
      trigger: 'blur'
    },
    span: 12
  },
  {
    type: 'customRender',
    span: 12,
    customRender: (
      <div>
        <span class="text-16px color-red font-800">样品转量产：</span>
        <ACheckbox
          v-model:value={model.value.pnType}
          onChange={e => {
            model.value.pnType = e.target.checked;
          }}
        ></ACheckbox>
      </div>
    )
  },
  {
    type: 'customRender',
    span: 12,
    customRender: (
      <div>
        <span>客户确认：</span>
        <ACheckbox
          v-model:value={model.value.customerCheck}
          onChange={e => {
            model.value.customerCheck = e.target.checked;
          }}
        ></ACheckbox>
      </div>
    )
  },
  {
    type: 'dictionary',
    key: 'changeReason',
    label: '变更原因',
    dictCode: 'ecn_change_reason',
    useGrid: true,
    selectType: 'checkbox',
    placeholder: '请选择变更原因',
    span: 24,
    change: value => {
      if (value.includes('其他')) {
        otherReasonCol.value = 24;
      } else {
        model.value.otherReason = null;
        otherReasonCol.value = 0;
      }
    }
  },
  {
    type: 'textarea',
    key: 'otherReason',
    label: '其他原因',
    span: otherReasonCol,
    placeholder: ''
  },
  {
    type: 'select',
    key: 'oldDataDeal',
    label: '旧资料处理',
    placeholder: '请选择旧资料处理',
    selectOptions: [
      {
        label: '报废',
        value: '报废'
      },
      {
        label: '共存',
        value: '共存'
      }
    ],
    span: 12
  },
  {
    type: 'select',
    key: 'inventoryDealMethod',
    label: '库存板处理方法',
    placeholder: '请选择库存板处理方法',
    selectOptions: [
      {
        label: '可出货',
        value: '可出货'
      },
      {
        label: '无库存',
        value: '无库存'
      },
      {
        label: '报废',
        value: '报废'
      },
      {
        label: '下旧版本订单吸收',
        value: '下旧版本订单吸收'
      },
      {
        label: '分开包装用新订单出货',
        value: '分开包装用新订单出货'
      },
      {
        label: '待客户确认',
        value: '待客户确认'
      }
    ],
    span: 12
  },
  {
    type: 'select',
    key: 'nowboardDealMethod',
    label: '在线板处理方法',
    placeholder: '',
    selectOptions: [
      {
        label: '暂停待通知',
        value: '暂停待通知'
      },
      {
        label: '报废处理',
        value: '报废处理'
      },
      {
        label: '返工',
        value: '返工'
      },
      {
        label: '特采出货',
        value: '特采出货'
      },
      {
        label: '无在线板',
        value: '无在线板'
      },
      {
        label: '在线板正常生产',
        value: '在线板正常生产'
      },
      {
        label: '在线板按新资料',
        value: '在线板按新资料'
      }
    ],
    placeholder: '请选择在线板处理方法',
    rule: {
      required: true,
      message: '请选择在线板处理方法',
      trigger: 'blur'
    },
    span: 12
  }
];

const tableRef = ref(null);
const searchParams = ref({});
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '生产批号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'modelNo',
    dataIndex: 'modelNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.modelNo}</span>;
    }
  },
  {
    key: 'teachName',
    dataIndex: 'teachName',
    title: '工艺名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'time',
    dataIndex: 'time',
    title: '收板时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'wipQty',
    dataIndex: 'wipQty',
    title: '结存数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 70
  }
];
const dataSource = [];

const searchModuleNoRef = ref(null);

function getModelData() {
  const selectRow = props.rowData;

  model.value.moduleNo = selectRow.moduleNo;
  //  const splitMoudleNo = selectRow.moduleNo.split('');
  // 判断是否分板 例如HP4191067B2-A
  let splitMoudleNo;
  // 后缀
  const letterArr = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
  ];
  let suffix = null;
  if (model.value.moduleNo.includes('-')) {
    suffix = model.value.moduleNo.split('-')[1];
    splitMoudleNo = model.value.moduleNo.split('-')[0].split('');
  } else {
    splitMoudleNo = model.value.moduleNo.split('');
  }
  const letterIndex = letterArr.indexOf(splitMoudleNo[splitMoudleNo.length - 2]);
  splitMoudleNo[splitMoudleNo.length - 2] = letterArr[letterIndex + 1];
  splitMoudleNo[splitMoudleNo.length - 1] = 0;
  model.value.fullProdNo = `${splitMoudleNo.join('')}${suffix ? `-${suffix}` : ''}`; // 旧生产型号
  model.value.custProdNo = selectRow.custProdNo; // 客户型号
  model.value.newCustProdNo = selectRow.custProdNo; // 新客户型号
  model.value.sameModuleNo = selectRow.sameModuleNo; // 同等型号
  model.value.newSameModuleNo = selectRow.sameModuleNo; // 新同等型号
  model.value.surfTrea1 = selectRow.surfTrea1; // 旧型号特性
  model.value.newSurfTrea1 = selectRow.surfTrea1; // 新同等型号特性
  model.value.custProdName = selectRow.custAB; // 客户名称
}

nextTick(() => {
  getModelData();
});

async function validateForm() {
  await formRef.value.validateForm();
}

defineExpose({
  model: model.value,
  validateForm
});
</script>

<template>
  <div class="h-full w-full">
    <Form ref="formRef" v-model:model="model" :form-list="formList"></Form>
    <!--
 <div class="w-full table" :style="{ height: `calc(100% - ${height}px)` }">
      <Table
        ref="tableRef"
        v-model:searchParams="searchParams"
        :column="column"
        :show-row-selection="true"
        row-key="ECNno"
        :scroll="{ y: 'auto' }"
        is-init-get-data
        :data-source="dataSource"
        url="/erpsyncmes/Mi/findModuleNo"
        :auto-generate-uuid="false"
        class="h-full"
        :is-pagination="false"
      ></Table>
    </div>
-->
  </div>
</template>

<style lang="scss" scoped></style>
